<template>
  <div class="card-box">
    <a-card title="" :bordered="false" class="card-item" v-for="(item, index) in cardList" :key="index"
      @click="clickItem(item.path)">
      {{ item.name }}
    </a-card>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const cardList = [
  {
    name: "键盘指法练习",
  },
  {
    name: "拼音打字练习",
  },
  {
    name: "汉字打字练习",
    path: "dazi",
  },
  {
    name: "五笔打字练习",
  },
];
const clickItem = (path) => {
  if (path) {
    router.push(path);
  }
};
onMounted(() => {
  document.body.setAttribute("arco-theme", "dark");
});
</script>
<style lang="less" scoped>
.card-box {
  display: flex;

  .card-item {
    width: 300px;
    height: 100px;
    display: flex;
    align-items: center;
    margin: 60px 20px;
    cursor: pointer;
    border-radius: 10px;

    /deep/.arco-card-body {
      color: #fff;
      padding: 30px 20px;
    }
  }
}
</style>